<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物料分析流程详情 - 物料分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body class="bg-gray-100 p-6">
    <div class="max-w-7xl mx-auto">
        <!-- 页面标题和返回按钮 -->
        <div class="flex items-center mb-6">
            <button class="text-gray-600 hover:text-gray-900 mr-4" onclick="history.back()">
                <i class="fas fa-arrow-left"></i>
            </button>
            <h1 class="text-2xl font-bold text-gray-800">物料分析流程详情</h1>
        </div>

        <!-- 标签页导航 -->
        <div class="bg-white rounded-lg shadow-md mb-6">
            <div class="border-b border-gray-200">
                <nav class="flex -mb-px overflow-x-auto">
                    <button class="tab-button active py-4 px-6 text-blue-600 border-b-2 border-blue-600 font-medium" data-tab="basic-info">
                        基本信息
                    </button>
                    <button class="tab-button py-4 px-6 text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium" data-tab="disassembly-list">
                        拆解清单总表
                    </button>
                    <button class="tab-button py-4 px-6 text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium" data-tab="process-params">
                        工艺参数
                    </button>
                    <button class="tab-button py-4 px-6 text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium" data-tab="mold-fee">
                        模具费
                    </button>
                    <button class="tab-button py-4 px-6 text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium" data-tab="certification-fee">
                        认证费
                    </button>
                    <button class="tab-button py-4 px-6 text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium" data-tab="development-fee">
                        开发费
                    </button>
                    <button class="tab-button py-4 px-6 text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium" data-tab="test-fee">
                        试验费
                    </button>
                    <button class="tab-button py-4 px-6 text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium" data-tab="other-fee">
                        其他费
                    </button>
                    <button class="tab-button py-4 px-6 text-gray-500 hover:text-gray-700 hover:border-gray-300 font-medium" data-tab="approval-info">
                        审批信息
                    </button>
                </nav>
            </div>

            <!-- 基本信息标签页内容 -->
            <div class="tab-content active p-6" id="basic-info">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">基本信息</h3>
                    <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">物料分析流程编号</label>
                            <a href="material-analysis-detail.html?code=MA-2023-001" class="text-blue-600 hover:text-blue-800">
                                <input type="text" class="form-input w-full px-3 py-2 border rounded-lg cursor-pointer" value="MA-2023-001" readonly>
                            </a>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">物料编码</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="M001" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">物料描述</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="测试物料" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <span class="status-badge processing">处理中</span>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">技术工程师</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="张三" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">价值分析工程师</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" value="李四" readonly>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 拆解清单总表标签页内容 -->
            <div class="tab-content hidden p-6" id="disassembly-list">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">拆解清单总表</h3>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">序号</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">零部件编号</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">零部件名称</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">材料</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">规格</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">单位</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">重量(g)</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">备注</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200" id="disassemblyTableBody">
                                <!-- 拆解清单数据将通过JavaScript动态添加 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 工艺参数标签页内容 -->
            <div class="tab-content hidden p-6" id="process-params">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">工艺参数</h3>
                    <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">加工工艺</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">表面处理</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">加工精度</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">加工设备</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">工艺说明</label>
                            <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" readonly></textarea>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 模具费标签页内容 -->
            <div class="tab-content hidden p-6" id="mold-fee">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">模具费</h3>
                    <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">模具类型</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">模具数量</label>
                            <input type="number" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">模具单价(元)</label>
                            <input type="number" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">模具总价(元)</label>
                            <input type="number" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">模具说明</label>
                            <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" readonly></textarea>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 认证费标签页内容 -->
            <div class="tab-content hidden p-6" id="certification-fee">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">认证费</h3>
                    <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">认证类型</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">认证费用(元)</label>
                            <input type="number" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">认证说明</label>
                            <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" readonly></textarea>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 开发费标签页内容 -->
            <div class="tab-content hidden p-6" id="development-fee">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">开发费</h3>
                    <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">开发类型</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">开发费用(元)</label>
                            <input type="number" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">开发说明</label>
                            <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" readonly></textarea>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 试验费标签页内容 -->
            <div class="tab-content hidden p-6" id="test-fee">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">试验费</h3>
                    <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">试验类型</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">试验费用(元)</label>
                            <input type="number" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">试验说明</label>
                            <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" readonly></textarea>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 其他费标签页内容 -->
            <div class="tab-content hidden p-6" id="other-fee">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">其他费</h3>
                    <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">费用类型</label>
                            <input type="text" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group">
                            <label class="block text-sm font-medium text-gray-700 mb-1">费用金额(元)</label>
                            <input type="number" class="form-input w-full px-3 py-2 border rounded-lg" readonly>
                        </div>
                        <div class="form-group md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">费用说明</label>
                            <textarea class="form-input w-full px-3 py-2 border rounded-lg" rows="3" readonly></textarea>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 审批信息标签页内容 -->
            <div class="tab-content hidden p-6" id="approval-info">
                <div class="bg-white rounded-lg shadow-md p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">审批信息</h3>
                    <div class="space-y-4" id="approvalRecords">
                        <!-- 审批记录将通过JavaScript动态添加 -->
                    </div>
                </div>
            </div>
        </div>

        <div class="action-buttons mb-6 flex justify-between items-center">
            <div class="flex flex-wrap gap-2">
                <button class="action-button px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700" onclick="submitParameters()" id="submitParametersBtn">
                    <i class="fas fa-check mr-2"></i>提交参数
                </button>
                <button class="action-button px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700" onclick="submitAnalysis()" id="submitAnalysisBtn">
                    <i class="fas fa-check-circle mr-2"></i>提交分析
                </button>
                <button class="action-button px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700" onclick="approveBySupervisor()" id="approveBySupervisorBtn">
                    <i class="fas fa-user-check mr-2"></i>科长审批
                </button>
                <button class="action-button px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700" onclick="approveByManager()" id="approveByManagerBtn">
                    <i class="fas fa-user-tie mr-2"></i>经理审批
                </button>
                <button class="action-button px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700" onclick="rejectAnalysis()" id="rejectAnalysisBtn">
                    <i class="fas fa-times-circle mr-2"></i>驳回修改
                </button>
                <button class="action-button px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700" onclick="returnToAnalysis()" id="returnToAnalysisBtn">
                    <i class="fas fa-undo mr-2"></i>退回分析
                </button>
            </div>
        </div>
    </div>

    <script>
        // 标签页切换
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', () => {
                const tabId = button.getAttribute('data-tab');
                
                // 移除所有标签页的active类
                document.querySelectorAll('.tab-button').forEach(btn => {
                    btn.classList.remove('active', 'text-blue-600', 'border-blue-600');
                    btn.classList.add('text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
                });
                
                // 隐藏所有标签内容
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.add('hidden');
                });

                // 添加当前标签页的active类
                button.classList.remove('text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
                button.classList.add('active', 'text-blue-600', 'border-blue-600');

                // 显示对应的内容
                const content = document.getElementById(tabId);
                if (content) {
                    content.classList.remove('hidden');
                    content.classList.add('active');
                }
            });
        });

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 获取URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const processCode = urlParams.get('code');
            
            if (processCode) {
                // 加载物料分析流程数据
                loadMaterialAnalysisData(processCode);
            } else {
                alert('未找到物料分析流程编号');
                window.location.href = 'process-detail.html';
            }

            // 添加物料分析流程编号的点击事件
            const processCodeInput = document.querySelector('input[value="MA-2023-001"]');
            if (processCodeInput) {
                processCodeInput.addEventListener('click', function(e) {
                    e.preventDefault();
                    window.location.href = `material-analysis-detail.html?code=${this.value}`;
                });
            }
        });

        // 根据子流程状态更新按钮显示
        function updateButtonsByStatus(status) {
            const buttons = {
                submitParametersBtn: ['参数待提交'],
                submitAnalysisBtn: ['分析中'],
                approveBySupervisorBtn: ['科长审批中'],
                approveByManagerBtn: ['经理审批中'],
                rejectAnalysisBtn: ['分析中'],
                returnToAnalysisBtn: ['科长审批中', '经理审批中']
            };

            Object.keys(buttons).forEach(buttonId => {
                const button = document.getElementById(buttonId);
                if (button) {
                    button.style.display = buttons[buttonId].includes(status) ? 'block' : 'none';
                }
            });
        }

        // 提交参数
        function submitParameters() {
            if (confirm('确定要提交参数吗？')) {
                // 这里应该调用后端API提交参数
                // 模拟提交成功
                alert('参数提交成功！');
                loadMaterialAnalysisData(processCode);
            }
        }

        // 提交分析
        function submitAnalysis() {
            if (confirm('确定要提交分析结果吗？')) {
                // 这里应该调用后端API提交分析
                // 模拟提交成功
                alert('分析提交成功！');
                loadMaterialAnalysisData(processCode);
            }
        }

        // 科长审批
        function approveBySupervisor() {
            if (confirm('确定要通过科长审批吗？')) {
                // 这里应该调用后端API提交审批
                // 模拟审批成功
                alert('科长审批通过！');
                loadMaterialAnalysisData(processCode);
            }
        }

        // 经理审批
        function approveByManager() {
            if (confirm('确定要通过经理审批吗？')) {
                // 这里应该调用后端API提交审批
                // 模拟审批成功
                alert('经理审批通过！');
                loadMaterialAnalysisData(processCode);
            }
        }

        // 驳回修改
        function rejectAnalysis() {
            if (confirm('确定要驳回分析结果吗？')) {
                // 这里应该调用后端API驳回分析
                // 模拟驳回成功
                alert('分析已驳回！');
                loadMaterialAnalysisData(processCode);
            }
        }

        // 退回分析
        function returnToAnalysis() {
            if (confirm('确定要退回分析吗？')) {
                // 这里应该调用后端API退回分析
                // 模拟退回成功
                alert('已退回分析！');
                loadMaterialAnalysisData(processCode);
            }
        }

        // 修改加载物料分析数据函数
        function loadMaterialAnalysisData(processCode) {
            // 这里应该调用后端API获取物料分析数据
            // 模拟数据
            const mockData = {
                processCode: processCode,
                materialCode: 'M001',
                materialDescription: '测试物料1',
                status: '分析中', // 可能的状态：待分派、参数待提交、分析中、科长审批中、经理审批中、已结案
                technicalEngineer: '张三',
                valueEngineer: '李四',
                supervisor: '王五',
                manager: '赵六',
                // ... 其他数据
            };

            // 更新基本信息
            document.querySelector('input[value="MA-2023-001"]').value = mockData.processCode;
            document.querySelector('input[value="M001"]').value = mockData.materialCode;
            document.querySelector('input[value="测试物料1"]').value = mockData.materialDescription;
            document.querySelector('span.status-badge').textContent = mockData.status;
            document.querySelector('span.status-badge').className = `status-badge ${getStatusClass(mockData.status)}`;

            // 更新按钮显示
            updateButtonsByStatus(mockData.status);

            // 加载其他数据...
        }

        // 获取状态样式类
        function getStatusClass(status) {
            switch (status) {
                case '待分派':
                    return 'pending';
                case '参数待提交':
                    return 'pending-parameters';
                case '分析中':
                    return 'analyzing';
                case '科长审批中':
                    return 'supervisor-review';
                case '经理审批中':
                    return 'manager-review';
                case '已结案':
                    return 'completed';
                default:
                    return '';
            }
        }

        // 加载拆解清单数据
        function loadDisassemblyList() {
            // 这里应该调用后端API获取数据
            // 模拟数据
            const mockData = [
                {
                    id: 1,
                    partNumber: 'P001',
                    partName: '零件1',
                    material: '钢材',
                    specification: '10mm',
                    unit: '个',
                    quantity: 1,
                    weight: 100,
                    remark: '测试零件'
                }
                // 更多模拟数据...
            ];

            const tbody = document.getElementById('disassemblyTableBody');
            tbody.innerHTML = '';

            mockData.forEach(item => {
                const tr = document.createElement('tr');
                tr.className = 'hover:bg-gray-50';
                tr.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.id}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.partNumber}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.partName}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.material}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.specification}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.unit}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.quantity}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.weight}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${item.remark}</td>
                `;
                tbody.appendChild(tr);
            });
        }
    </script>
</body>
</html> 